<template>
    <div class="logic-tree">
        <div v-for="(node, index) in nodes" :key="node.id" class="node-container">
            <div class="node" :ref="setNodeRef(node)">
                <div class="node-slot">
                    <div v-if="node.type === 'data'" class="node-data">
                        <el-select v-model="value1" placeholder="请选择" style="width: 180px;margin-right: 10px;">
                            <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-select v-model="value2" placeholder="请选择" style="width: 100px;margin-right: 10px">
                            <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-select v-model="value3" placeholder="请选择" style="width: 150px">
                            <el-option
                                v-for="item in options3"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div v-if="node.type === 'or'" class="node-or" @click.stop="switchNode(node,'and')"><el-check-tag checked type="danger">{{ node.data.name }}</el-check-tag></div>
                    <div v-if="node.type === 'and'" class="node-and" @click.stop="switchNode(node,'or')"><el-check-tag checked type="success">{{ node.data.name }}</el-check-tag></div>
                </div>                
                <div class="btns_group1" v-if="node.grade > 1">
                    <!-- <el-button size="small" type="warning" :icon="Edit" circle plain/> -->                    
                    <el-button size="small" type="primary" :icon="Plus" circle plain @click.stop="addSiblingNode(node, index)">
                    </el-button>
                    <el-button size="small" type="success" circle plain @click.stop="addChildNode(node, index, 'or')">
                        <template #icon>
                            <svg-icon name="opSymbol-andOr" width="18px" height="18px"></svg-icon>                                
                        </template>                            
                    </el-button>
                    <el-button size="small" type="danger" :icon="Delete" circle plain @click.stop="deleteNode(node, index)"/>
                </div>
            </div>
            <LogicTree v-if="node.children && node.children.length > 0" :nodes="node.children" />
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { inject } from 'vue';
import { NodeDemo } from './index.vue';
import {Plus,Delete} from '@element-plus/icons-vue'
// 生成新的节点ID
function generateNodeId(): number {
    gMaxId.value += 1;
    console.log('id', gMaxId)
    return gMaxId.value;
}
let gMaxId = inject('maxId', ref<number>(0))
// 使用 inject 接收方法
const updateNodeLine:any = inject('updateNodeLine');
const handleUpdateNodeLine = () => {
    if (updateNodeLine) {
        updateNodeLine();
    }
};
// 初始化节点数据
const props = defineProps<{ nodes: NodeDemo[] }>();
// 增加同级节点
function addSiblingNode(node: NodeDemo, index: number) {

    const newNode: NodeDemo = {
        id: generateNodeId(),
        grade: node.grade,
        type: 'data',   // 节点类型 data、or、and 
        data: { name: `新节点 ${new Date().getTime()}` }   //节点的内容
    };

    // 将新节点插入到指定位置
    props.nodes.splice(index + 1, 0, newNode);
    handleUpdateNodeLine();
}
// 增加下级节点,只能为or或者and
function addChildNode(node: NodeDemo, index: number, opType: string) {

    const newNode: NodeDemo = {
        id: generateNodeId(),
        grade: node.grade,
        type: opType,   // 节点类型 data、or、and      
        data: { name: opType === 'or' ? '或' : '且' },
        children: [
            { id: generateNodeId(), grade: node.grade+1,type: 'data', data: { name: `新节点 ${new Date().getTime()}` } },
            { id: generateNodeId(), grade: node.grade+1,type: 'data', data: { name: `新节点 ${new Date().getTime()}` } }
        ]
    };

    // 将新节点插入到指定位置
    props.nodes.splice(index + 1, 0, newNode);
    handleUpdateNodeLine();
}

//删除节点
function deleteNode(_node: NodeDemo, index: number) {

    // 将指定位置数据删除
    props.nodes.splice(index , 1);
    handleUpdateNodeLine();
}
// 切换节点类型
function switchNode(node: NodeDemo, opType: string) {
    node.type = opType;
    node.data.name = opType === 'or' ? '或' : '且';
    // handleUpdateNodeLine();
}
// 创建一个函数来设置 ref
const setNodeRef = (node: NodeDemo) => {
    return (el: any) => {
        node.nodeRef = el;
    };
};
//处理数据
const value1 = ref('1')

const options1 = [
  {
    value: '1',
    label: '债券分类',
  },
  {
    value: '2',
    label: '债券CR评级',
  },
]
const value2 = ref('1')

const options2 = [
  {
    value: '1',
    label: '包含',
  },
  {
    value: '2',
    label: '不包含',
  },
]
const value3 = ref('1')

const options3 = [
  {
    value: '1',
    label: '信用债',
  },
  {
    value: '2',
    label: '利率债',
  },
]
</script>
  
<style scoped lang="scss">
.logic-tree {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 20px;    
}

.node-container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.node {
    display: flex;
    align-items: center;    
    position: relative;
    height: 50px;
    justify-content: center;
    padding: 0 10px;
    .node-slot{
        height: 50px;
        line-height: 50px;        
        white-space: nowrap;        
        .node-data{
            height: 50px;
            line-height: 50px;
            display: flex;
            align-items: center;
        }
    }
    .btns_group1{            
        display: flex;
        align-items: center;        
        height: 50px;        
        position: absolute;
        left: 0; 
        top: 0;
        opacity: 0; /* 默认不可见 */
        // visibility: hidden;        
        border-radius: 0 4px 4px 0;
        background-color: var(--el-fill-color);        
        .el-button + .el-button {
            margin-left: 10px;
        }
    }   
}
:deep(.el-icon){
    height: 2em;
    width: 2em;
    line-height: 2em;
}
.node:hover {
    border-radius: 4px 0 0 4px;
    background-color: var(--el-fill-color);
    z-index: 1;
    cursor: pointer;
    .btns_group1{     
        // visibility: visible;
        left: 100%; 
        width: 102px;
        opacity: 1; /* 可见 */
    }
}

</style>
